<template>
	<div class="panel panel-default">
		<selfunc @change="selChange" ref="mysel" :position="position"></selfunc>
		<el-divider></el-divider>
		<el-checkbox-group v-model="checkList">
			<el-checkbox label="筛选"></el-checkbox>
			<el-checkbox label="搜索"></el-checkbox>
			<el-checkbox label="排序"></el-checkbox>
			<el-checkbox label="控件"></el-checkbox>
			<el-checkbox label="文案"></el-checkbox>
			<el-checkbox label="流程"></el-checkbox>
			<el-checkbox label="适老化"></el-checkbox>
			<el-checkbox label="合规"></el-checkbox>
			<el-checkbox label="多版本多主题"></el-checkbox>
			<el-checkbox label="UI"></el-checkbox>
			<el-checkbox label="交互"></el-checkbox>
			<el-checkbox label="其他"></el-checkbox>
		</el-checkbox-group>
		<el-divider></el-divider>
		<el-radio v-model="innovation" label="视觉创新"></el-radio>
		<el-radio v-model="innovation" label="交互创新"></el-radio>
		<el-radio v-model="innovation" label="技术创新"></el-radio>
		<el-radio v-model="innovation" label="功能创新"></el-radio>
		<el-radio v-model="innovation" label="产品创新"></el-radio>
		<el-radio v-model="innovation" label="营销创新"></el-radio>
		<el-divider></el-divider>
		<!--第1级-->
		<el-select v-model="title0" placeholder="请选择" @change="assessChange0">
			<el-option
				v-for="item in options0"
				:key="item.value"
				:label="item.label"
				:value="item.value"
			>
			</el-option>
		</el-select>
		<!--第2级-->
		<el-select v-model="title1" placeholder="请选择" @change="assessChange1">
			<el-option
				v-for="item in options1"
				:key="item.value"
				:label="item.label"
				:value="item.value"
			>
			</el-option>
		</el-select>
		<!--第3级-->
		<el-select v-model="title2" placeholder="请选择" @change="assessChange2">
			<el-option
				v-for="item in options2"
				:key="item.value"
				:label="item.label"
				:value="item.value"
			>
			</el-option>
		</el-select>
		<!--第4级-->
		<el-select v-model="title3" placeholder="请选择" @change="assessChange3">
			<el-option
				v-for="item in options3"
				:key="item.value"
				:label="item.label"
				:value="item.value"
			>
			</el-option>
		</el-select>
		<!--第5级-->
		<el-select v-model="title4" placeholder="请选择" @change="assessChange4">
			<el-option
				v-for="item in options4"
				:key="item.value"
				:label="item.label"
				:value="item.value"
			>
			</el-option>
		</el-select>
		<el-divider></el-divider>
		<div style="min-height: 60px; height: auto">
			<div id="tag-container">
				<el-tag
					v-for="tag in tags"
					:key="tag.name"
					closable
					type="info"
					@close="closeTag"
				>
					{{ tag.name }}
				</el-tag>
			</div>
			<div
				style="
					width: 15%;
					height: 60px;
					display: inline-block;
					vertical-align: middle;
				"
			>
				<el-button type="primary" @click="apply" id="applycons">应用</el-button>
			</div>
		</div>
	</div>
</template>

<script>
module.exports = {
	data: function () {
		return {
			checkList: [],
			innovation: null,
			title0: null,
			title1: null,
			title2: null,
			title3: null,
			title4: null,
			options0: [],
			options1: [],
			options2: [],
			options3: [],
			options4: [],
			tags: [],
		};
	},
	emits: ["apply"],
	props: ["position"],
	watch: {
		checkList: function () {
			for (let item of this.checkList) {
				let isIn = false;
				for (let m of this.tags) {
					if (m.t == "tag" && m.name == item) {
						isIn = true;
					}
				}
				if (!isIn) this.tags.push({ t: "tag", name: item });
			}
		},
		innovation: function () {
			for (let i in this.tags) {
				if (this.tags[i].t == "special") {
					this.tags.splice(i, 1);
					break;
				}
			}
			if (this.innovation != null)
				this.tags.push({ t: "special", name: this.innovation });
		},
		title0: function () {
			this.assessChange0(null);
		},
		title1: function () {
			this.assessChange1(null);
		},
		title2: function () {
			this.assessChange2(null);
		},
		title3: function () {
			this.assessChange3(null);
		},
		title4: function () {
			this.assessChange4(null);
		},
	},
	created: function () {
		axios.get(`/assesstitle`).then((res) => {
			for (let item of res.data) {
				this.options0.push({ label: item.title, value: item.title });
			}
		});
	},
	components: {
		selfunc: httpVueLoader("/selfunc.vue"),
	},
	methods: {
		deleteTypeTags: function (t) {
			for (let i = 0; i < this.tags.length; i++) {
				if (this.tags[i].t == t) {
					this.tags.splice(i--, 1);
				}
			}
		},
		assessChange0: function (target0) {
			this.title1 = null;
			this.title2 = null;
			this.title3 = null;
			this.title4 = null;
			this.options1 = [];
			this.options2 = [];
			this.options3 = [];
			this.options4 = [];
			if (target0 != null) {
				this.deleteTypeTags("class");
				this.deleteTypeTags("item");
				this.deleteTypeTags("subitem");
				this.deleteTypeTags("target");
				this.deleteTypeTags("example");
				this.tags.push({ t: "class", name: target0 });
				axios.get(`/assesstitle?con0=${target0}`).then((res) => {
					for (let item of res.data) {
						this.options1.push({ label: item.title, value: item.title });
					}
				});
			}
		},
		assessChange1: function (target1) {
			this.title2 = null;
			this.title3 = null;
			this.title4 = null;
			this.options2 = [];
			this.options3 = [];
			this.options4 = [];
			if (target1 != null) {
				this.deleteTypeTags("item");
				this.deleteTypeTags("subitem");
				this.deleteTypeTags("target");
				this.deleteTypeTags("example");
				this.tags.push({ t: "item", name: target1 });
				axios
					.get(`/assesstitle?con0=${this.title0}&con1=${target1}`)
					.then((res) => {
						for (let item of res.data) {
							this.options2.push({ label: item.title, value: item.title });
						}
					});
			}
		},
		assessChange2: function (target2) {
			this.title3 = null;
			this.title4 = null;
			this.options3 = [];
			this.options4 = [];
			if (target2 != null) {
				this.deleteTypeTags("subitem");
				this.deleteTypeTags("target");
				this.deleteTypeTags("example");
				this.tags.push({ t: "subitem", name: target2 });
				axios
					.get(
						`/assesstitle?con0=${this.title0}&con1=${this.title1}&con2=${target2}`
					)
					.then((res) => {
						for (let item of res.data) {
							this.options3.push({ label: item.title, value: item.title });
						}
					});
			}
		},

		assessChange3: function (target3) {
			this.title4 = null;
			this.options4 = [];
			if (target3 != null) {
				this.deleteTypeTags("target");
				this.deleteTypeTags("example");
				this.tags.push({ t: "target", name: target3 });
				axios
					.get(
						`/assesstitle?con0=${this.title0}&con1=${this.title1}&con2=${this.title2}&con3=${target3}`
					)
					.then((res) => {
						for (let item of res.data) {
							this.options4.push({ label: item.title, value: item.title });
						}
					});
			}
		},
		assessChange4: function (target4) {
			console.log("assesschange4:" + this.title4);
			if (target4 != null) {
				this.deleteTypeTags("example");
				this.tags.push({ t: "example", name: target4 });
			}
		},
		closeTag: function (event) {
			let start = $(event.target).parent().index();
			let obj = this.tags[start];
			this.tags.splice(start, 1);
			if (obj.t == "func") {
				this.$refs.mysel.value1 = [];
			} else if (obj.t == "app") {
				this.$refs.mysel.value2 = [];
			} else if (obj.t == "tag") {
				for (let i in this.checkList) {
					if (this.checkList[i] == obj.name) {
						this.checkList.splice(i, 1);
						break;
					}
				}
			} else if (obj.t == "special") {
				this.innovation = null;
			} else if (obj.t == "example") {
				this.title4 = null;
			} else if (obj.t == "target") {
				this.title3 = null;
				for (let i in this.tags) {
					if (this.tags[i].t == "example") {
						this.tags.splice(i, 1);
						break;
					}
				}
			} else if (obj.t == "subitem") {
				this.title2 = null;
				for (let i = 0; i < this.tags.length; i++) {
					//级联删除后面的标签
					if (this.tags[i].t == "target" || this.tags[i].t == "example") {
						this.tags.splice(i, 1);
						i -= 1;
					}
				}
			} else if (obj.t == "item") {
				this.title1 = null;
				for (let i = 0; i < this.tags.length; i++) {
					if (
						this.tags[i].t == "subitem" ||
						this.tags[i].t == "target" ||
						this.tags[i].t == "example"
					) {
						this.tags.splice(i, 1);
						i -= 1;
					}
				}
			} else if (obj.t == "class") {
				this.title0 = null;
				for (let i = 0; i < this.tags.length; i++) {
					if (
						this.tags[i].t == "item" ||
						this.tags[i].t == "subitem" ||
						this.tags[i].t == "target" ||
						this.tags[i].t == "example"
					) {
						this.tags.splice(i, 1);
						i -= 1;
					}
				}
			}
		},
		selChange: function (value) {
			for (let i in this.tags) {
				if (this.tags[i].t === "func") this.tags.splice(i, 1);
			}
			if (this.$refs.mysel.value1.length) {
				this.tags.push({
					t: "func",
					name: this.$refs.mysel.value1[0] + "|" + this.$refs.mysel.value1[1],
				});
			}
			for (let i in this.tags) {
				if (this.tags[i].t === "app") this.tags.splice(i, 1);
			}
			if (this.$refs.mysel.value2.length) {
				this.tags.push({
					t: "app",
					name: this.$refs.mysel.value2[0] + "|" + this.$refs.mysel.value2[1],
				});
			}
		},
		apply: function () {
			this.$emit("apply", this.tags);
		},
	},
};
</script>

<style scoped>
.panel {
	text-align: center;
	height: auto;
}

.el-tag {
	margin: 10px;
	margin-top: 0;
}

.el-cascader {
	margin-top: 20px;
}

#applycons {
	position: absolute;
	right: 50px;
}

#tag-container {
	width: 80%;
	height: 100%;
	display: inline-block;
	top: 0;
	text-align: left;
}

.panel {
	width: 100%;
}
</style>